<template>
	<div class="rightdiv">
		<div class="rd_top">
			<div class="rd_top_title">
				<span class="lytitle">站点安全预警 </span>
				<a-space :size="8" style="margin-top: 9px">
					<a @click="zhandianChange = 1">累计</a>
					<a-divider style="background: #8c8c8c; width: 1px" type="vertical" />
					<a @click="zhandianChange = 2"> <Icon icon="fluent:vehicle-car-parking-48-filled" style="color: #00a096; margin-right: 5px" />实时 </a>
					<a-divider style="background: #8c8c8c; width: 1px" type="vertical" />

					<router-link to="/warningProtection/BizWarningInfo">全部预警</router-link>
				</a-space>
			</div>
			<div class="rd_top_content">
				<!--引用表格-->
				<a-table size="small" :bordered="true" :columns="columns" :data-source="formattedData" :pagination="false">
					<template slot="chongdianzhan" slot-scope="text, record">
						<span class="stationname">{{ text }}</span>
					</template>
					<!-- <template slot="serial" slot-scope="text, record,index">
						<span class="stationname">{{ index }}</span>
					</template> -->
					<template #bodyCell="{column, text, record, index}">
						<template v-if="column.key === 'serial'">
							{{ index + 1 }}
						</template>
						<template v-if="column.key === 'tongji'">
							<!-- <a-space :size="3"> -->
							<a-tag style="margin-right: 0px" size="small" color="#ff3217">高</a-tag>{{ record.highNum }}<a-tag style="margin-right: 0px" color="#ff9447">中</a-tag>{{ record.middleNum }} <a-tag color="#3e8ed9" style="margin-right: 0px">低</a-tag>{{ record.lowNum }}
							<!-- </a-space> -->
						</template>
					</template>
				</a-table>
			</div>
		</div>
		<div class="rd_bom">
			<div class="rd_top_title">
				<span class="lytitle">预警原因分析 </span>
				<a-space :size="8" style="margin-top: 9px">
					<a>近30天</a>
					<a-divider style="background: #8c8c8c; width: 1px" type="vertical" />
					<a>近12月</a>
				</a-space>
			</div>
			<div class="rd_bom_echarts">
				<div class="rd_bom_lf">
					<scrollecharts :echartsdata="screenAlldata.overViewWarnMapVO.reasonNumMap" />
				</div>
				<div class="rd_bom_rt">
					<Funnelecharts :echartsdata="screenAlldata.overViewWarnMapVO.levelNumMap" />
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="js" name="OperationOverview" setup>
	import {ref, reactive, computed, unref} from 'vue';
	import {useListPage} from '/@/hooks/system/useListPage';
	import {useUserStore} from '/@/store/modules/user';
	import Gauge from '/@/components/chart/Gauge.vue';
	import scrollecharts from './scrollecharts.vue';
	import Funnelecharts from './Funnelecharts.vue';
	import {Statistic} from 'ant-design-vue';
	const props = defineProps({
		screenAlldata: Object,
	});
	const dateType = ref('month');
	const pagination = reactive({
		current: 1,
		pageSize: 5,
		// simple: true,
		size: 'small',
	});

	const zhandianChange = ref(1);
	// 计算属性，处理数据
	// 定义一个函数，用于将超过 1000 的数值转换为以“万”为单位的字符串
	const formatNumber = (num) => {
		return num >= 1000 ? (num / 10000).toFixed(0) + '万' : num;
	};

	// 定义一个函数，用于处理数据源
	const processData = (data) => {
		return data.slice(0, 5).map((item) => {
			const newItem = {...item};
			newItem.totalNum = formatNumber(newItem.totalNum);
			newItem.middleNum = formatNumber(newItem.middleNum);
			newItem.lowNum = formatNumber(newItem.lowNum);
			newItem.highNum = formatNumber(newItem.highNum);
			return newItem;
		});
	};
	const formattedData = computed(() => {
		if (zhandianChange.value == 1) {
			return processData(props.screenAlldata.totalWarnVOList);
		} else {
			return processData(props.screenAlldata.realTimeWarnVOList);
		}
	});
	const columns = ref([
		{
			title: '序号',
			dataIndex: 'serial',
			key: 'serial',
			width: 40,
			align: 'center',
		},
		{
			title: '充电站',
			dataIndex: 'stationName',
			ellipsis: true,
			align: 'center',
			width: 160,
			scopedSlots: {customRender: 'stationName'},
		},
		{
			title: '预警次数',
			dataIndex: 'totalNum',
			align: 'center',
			width: 60,
		},
		{
			title: '分级统计',
			dataIndex: 'tongji',
			key: 'tongji',
			align: 'center',
		},
	]);
	const dataSource = ref([
		{
			key: '1',
			chongdianzhan: '海南儋州市怡心花园阿斯达四大',
			yujingceshu: '45.5',
			time: '海南儋州市怡心花园阿斯达四大海南儋州市怡心花园阿斯达四大海南儋州市怡心花园阿斯达四大',
		},
		{
			key: '1',
			chongdianzhan: '海南儋州市怡心花园阿斯达四大',
			yujingceshu: '45.5',
			time: '56',
		},
		{
			key: '1',
			chongdianzhan: '海南儋州市怡心花园阿斯达四大',
			yujingceshu: '45.5',
			time: '56',
		},
		{
			key: '1',
			chongdianzhan: '海南儋州市怡心花园阿斯达四大',
			yujingceshu: '45.5',
			time: '56',
		},
		{
			key: '1',
			chongdianzhan: '海南儋州市怡心花园阿斯达四大',
			yujingceshu: '45.5',
			time: '56',
		},
	]);
	onMounted(() => {
		console.log('站点安全预警', props.screenAlldata);
	});
</script>

<style lang="less" scoped>
	:deep(.ant-picker),
	:deep(.ant-input-number) {
		width: 100%;
	}

	:deep(.ant-table-thead > tr) {
		line-height: 25px !important;
	}

	:deep(.ant-table-thead > tr > th) {
		padding: 8px 0px !important;
		// padding-left: 0px !important;
	}

	:deep(.ant-table-tbody > tr) {
		line-height: 14px !important;
	}

	.lytitle {
		position: relative;
		padding-left: 10px;
		font-weight: 400;
		font-style: normal;
		color: #00a096;
		font-size: 18px;

		&::before {
			content: '';
			width: 4px;
			height: 16px;
			background-color: #00a096;
			position: absolute;
			left: 0;
			top: 6px;
		}
	}

	.rightdiv {
		margin-left: 30px;

		.rd_top_title {
			display: flex;
			justify-content: space-between;
			margin-bottom: 30px;
		}

		.rd_top_content {
			position: relative;
		}

		.rd_bom {
			margin-top: 50px;

			.rd_bom_echarts {
				display: flex;

				.rd_bom_lf {
					width: 300px;
				}

				.rd_bom_rt {
					width: 200px;
				}
			}
		}
	}
</style>
